<template>
  <el-dialog v-model="show" width="1366px" :before-close="close">
    <div ref="dialogRef"></div>
  </el-dialog>
</template>

<script setup>
import { createVNode, render } from 'vue'
import { ElDialog } from 'element-plus'

const dialogRef = ref(null)
const props = defineProps({
  modelValue: { type: Boolean, default: true },
  component: { type: Object },
  props: { type: Object },
})

const show = ref(props.modelValue)

let one = false
const _render = () => {
  if (one) return

  one = true
  let el = document.createElement('div')

  const app = createVNode(props.component, props.props)

  render(app, el)

  dialogRef.value.appendChild(el)
}

const emit = defineEmits(['update:modelValue', 'close'])
const close = () => {
  show.value = false
  emit('update:modelValue', false) // v-model
  emit('close', false) // onClose 事件
}

const onOpen = () => {
  setTimeout(() => {
    _render()
  }, 0)
}

watch(
  () => props.modelValue,
  () => {
    show.value = props.modelValue
    if (show.value) onOpen()
  },
  {
    immediate: true,
  }
)
</script>

<style lang="scss" scoped></style>
